// 学习目标
// 了解BOM概念
// 浏览器顶级对象window
// 能够写出页面加载事件以及注意事项
// 能够写出两种定时器函数 并区分区别
// js执行机制
// location对象完成页面之间的跳转
// 能知晓navigation对象涉及的属性
// history提供的方法实现页面刷新


BOM是浏览器对象模型,提供独立于内容而与浏览器窗口进行交互的对象,顶级对象是window
BOM缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏
览器标准的一部分，现在浏览器厂商有各自的定义，因此兼容性比较差。
BOM比DOM更大 包含DOM 其主要对象有document、location、navigation、screen、history

BOM中的顶级对象window   
window是全局对象并且所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用时候可以省略window 如window.alert() 可以省略为alert()

window对象常用事件
onload onDOMContentLoaded 都是先加载再执行
load和DOMContentLoaded之间的区别是 load是等待全部加载完成之后再调用函数，DOMContentLoaded是仅当DOM加载完成之后就行 ie9以上才支持

onresize 调整窗口大小就会触发该事件，经常和window.innerWidth当前屏幕宽度配合完成响应式布局

//通常页面存在很多定时器 因此通常会给上标识符
window对象的方法 定时器 有两种setTimeout()、setInterval() window可以省略；两者的区别在于setTimeout延迟一定时间之后调用一次，setInterval隔一定时间
就调用一次，总共调用多次

setTimeout(回调函数,延时时间) 延迟时间是毫秒
清除定时器window.clearTimeout(timeoutID) window可以省略 clearTimeout取消settimeout设置的定时器  timeoutID就是给setTimeout设置的定时器名称

setInterval()方法重复调用一个函数，每隔这个时间就去调用一次回调函数
清除Interval定时器 clearInterval(intervalID)



console.log('this的指向问题-------------------------------------------------------------------------------------');
一般情况下,this的最终指向是调用它的对象,谁调用就指向谁

console.log('JS执行机制，同步和异步-----------------------------');
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——
JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。
比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果
JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

为了利用多核cpu的计算能力，HTML5允许JavaScript脚本创建多线程，于是JS中出现同步和异步
同步指的是程序的执行顺序和排列顺序是一致的，当前一个任务花费时间太长的时候，同步比较浪费资源

JS的执行机制是先执行同步任务里面的内容，然后将其中的回调函数等放入消息队列，等同步任务全部完成之后。再执行异步的任务
事件循环 主线程不断获得任务、执行任务 然后再获取任务（会等着异步进程进行处理 比如等待鼠标的点击） 再执行，这种机制是 事件循环  



console.log('Location对象---------------------------------------------');
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，该属性返回的是一个对象，因此这个属性也称为location对象
location对象的属性
location.href 获取或设置整个url
location.host 返回主机(域名)
location.port 返回端口号 
location.pathname 返回路径 /后面的地址
location.search 返回参数 ?后面的
location.hash 返回片段 #后面内容 常见于链接 锚点

可以用来实现跳转页面的功能 以及两个页面之间的交互功能

location的常见方法：
location.assign() 跟href一样 可以跳转页面即重定向 因为记录了历史所以可以回退  比如 location.assign("http://www.baidu.com")
location.replace() 替换当前页面 不记录历史 不能后退页面  location.replace("http://www.google.com")
location.reload() 重新加载页面 相当于刷新按钮或者f5 参数true 强制刷新ctrl+f5 强制刷新把本地缓存的东西强制刷新掉

console.log('navigator对象-----------------------------------------------');
通过pc端打开页面和手机端打开页面都不同,浏览器是通过navigator对象的属性知道的

常见属性
userAgent 该属性返回由客户机发送服务器的user-agent头部的值 



浏览器判断是pc端打开还是手机端打开
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
    Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
    |Symbian|Windows Phone)/i))) {
     window.location.href = ""; //手机
    } else {
     window.location.href = ""; //电脑
    }


console.log('history对象-------------------------------------------------------------------------------------');
history提供了与浏览器历史记录相关的，该对象包含用户(在浏览器窗口中)访问过的URL

常用方法：
back() 后退功能
forward()  前进功能
go(参数) 
history的前进后退一般在OA系统中使用